import React, {Component} from 'react';

class Index extends Component {
state={
    name:"name"
}
myRef=React.createRef();
    render() {
        return (
            <div>
                {this.state.name}
                <button onClick={()=>{
                    this.setState({
                        name:"张三"
                    })
                }} ref={this.myRef} >改变</button>
            </div>
        );
    }
    static getDerivedStateFromProps(nextProps,nextState){
        console.log("getDerivedStateFromProps")
        /*
        代替componentWillReceiveProps()。
        老版本中的componentWillReceiveProps()方法判断前后两个 props 是否相同，如果不同再将新的 props 更新到相应的 state 上去。这样做一来会破坏 state 数据的单一数据源，导致组件状态变得不可预测，另一方面也会增加组件的重绘次数。
        在 componentWillReceiveProps 中，我们一般会做以下两件事，一是根据 props 来更新 state，二是触发一些回调，如动画或页面跳转等。
        在老版本的 React 中，这两件事我们都需要在 componentWillReceiveProps 中去做。
        而在新版本中，官方将更新 state 与触发回调重新分配到了 getDerivedStateFromProps 与 componentDidUpdate 中，使得组件整体的更新逻辑更为清晰。而且在 getDerivedStateFromProps 中还禁止了组件去访问 this.props，强制让开发者去比较 nextProps 与 prevState 中的值，以确保当开发者用到 getDerivedStateFromProps 这个生命周期函数时，就是在根据当前的 props 来更新组件的 state，而不是去做其他一些让组件自身状态变得更加不可预测的事情。
        * */
        return {
            name:nextState.name
        }
        /*
        * 新老生命周期不能同时存在
        * */
    }
    componentDidUpdate(prevProps, prevState, snapshot) {
        console.log(snapshot)
    }

    //替代willupdate
    getSnapshotBeforeUpdate() {
        console.log('getSnapshotBeforeUpdate')
        /*
        * 记录状态
        * */
        return this.myRef.current.scrollHeight;

}
}
//优化时间将Component改为PureComponent
//当状态不会改变时不会改变
export default Index;
